<template>
  <div class="organization_max">
    <div class="left_company scrollbar_btf">
      <div class="search_head">
        <el-input clearable placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
      </div>
      <div>
        <div v-for="item in showLeftList" :key="item.id" class="node_item" @click="getOrganUserList(item)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="right_user_list">
      <el-form :inline="true" class="top_handle_box pl-12 pt-12">
        <el-form-item label="关键字">
          <el-input clearable v-model="searchName" placeholder="输入关键字检索"></el-input>
        </el-form-item>
        <el-form-item label="选择角色">
          <el-select clearable v-model="selectRole" placeholder="请选择角色">
            <el-option v-for="(item, index) in rolesList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="bindUserRole">绑定角色</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="multipleTable" :data="showRightList" @selection-change="handleSelectionChange" style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="userName" label="用户名"></el-table-column>
        <el-table-column prop="realName" label="真实名"></el-table-column>
        <el-table-column prop="position" label="职位"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column prop="overallRoleName" label="角色"></el-table-column>
        <!-- <el-table-column label="角色">
          <template slot-scope="{ row }">
            <span v-if="row.overallRoleCode">{{ showUserRole(row.overallRoleCode) }}</span>
            <span v-else style="color: red">未绑定</span>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script>
import authorityApi from '@/utils/tools/authorityApi/index.js'
import { getOrganizeList } from '@/apiList/api_power'
export default {
  name: 'UserAndRoles',
  data() {
    return {
      tableData: [],
      treeDataList: [],
      rolesList: [],
      countList: [],

      selectRole: '',
      searchName: '',
      filterText: '',
      multipleSelection: []
    }
  },
  computed: {
    showLeftList() {
      if (!this.filterText) return this.treeDataList
      return this.treeDataList.filter((e) => e.name.includes(this.filterText))
    },
    showRightList() {
      if (!this.searchName) return this.tableData
      return this.tableData.filter((e) => e.realName.includes(this.searchName) || e.userName.includes(this.searchName))
    }
  },
  created() {
    this.getAllUser()
    this.getAllRole()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.name.includes(value)
    },
    // 获取所有公司
    getAllUser() {
      getOrganizeList().then((res) => {
        if (!Array.isArray(res)) return
        const list = res.map((e) => ({ id: e.id, name: e.name, hierarchy: e.hierarchy }))
        this.treeDataList = list.filter((e) => e.name && e.hierarchy != '/')
        // 置顶根
        const rootDir = list.find((e) => e.hierarchy == '/')
        this.treeDataList.unshift(rootDir)
      })
    },
    // 获取所有的角色
    getAllRole() {
      authorityApi.RolesPort.getAllSysRoles({ loading: true, currentPage: 1, pageSize: 6e6 }, (res) => {
        this.rolesList = res.list
      })
    },
    showUserRole(code) {
      if (!code) return ''
      const cur = this.rolesList.find((e) => e.code == code)
      return cur ? cur.name : ''
    },
    userIsBind(sysUserId) {
      return this.countList.some((e) => e.sysUserId == sysUserId)
    },
    // 获取机构下的人
    getOrganUserList(node) {
      this.selectOrg = node
      authorityApi.UserPort.getOrganizeAllUser({ loading: true, queryType: 2, organizeId: node.id }, (res) => {
        this.tableData = res
      })
    },
    // 绑定用户角色
    bindUserRole() {
      if (!this.multipleSelection.length) return this.$message.error('请选择用户')
      if (!this.selectRole) return this.$message.error('请选择角色')
      const sysUserIds = this.multipleSelection.map((e) => e.id).toString()
      authorityApi.basisUserRoles.bindingUserAndRole({ sysUserIds, roleIds: this.selectRole }, (res) => {
        // 刷新绑定的用户
        this.$message.success('绑定成功')
        this.getOrganUserList(this.selectOrg)
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style lang="less" scoped>
.organization_max {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: calc(97vh - 150px);
  .left_company {
    height: 100%;
    overflow-y: scroll;
    background-color: #fff;
    /deep/ .el-tree-node__content {
      height: 32px;
    }
    .search_head {
      padding: 16px;
    }
  }
  .node_item {
    cursor: pointer;
    padding: 6px 16px;
    &:hover {
      background-color: #f5f7fa;
    }
  }
  .right_user_list {
    height: 100%;
    overflow-y: scroll;
  }
}
.top_handle_box {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #fff;
}
</style>
